<template>
  <div>
    <div class="_div" v-if="permissions.indexOf('sys_home_cpu') > -1 || permissions.indexOf('sys_home_mem') > -1">
      <el-card>
        <Chart v-if="permissions.indexOf('sys_home_cpu') > -1" class="chart" :option='CPUOptions'></Chart>
        <Chart v-if="permissions.indexOf('sys_home_mem') > -1" class="chart" :option='RAMOptions'></Chart>
      </el-card>
    </div>
    <div class="_div" v-if="permissions.indexOf('sys_home_safe') > -1">
      <el-card>
        <safe-policy  v-if="permissions.indexOf('sys_home_safe') > -1" :isFirstPage="true"/>
      </el-card>
    </div>
    <div class="_div" v-if="permissions.indexOf('sys_home_log') > -1" >
      <el-card>
        <log v-if="permissions.indexOf('sys_home_log') > -1" :isFirstPage="true"></log>
      </el-card>
    </div>
    <div class="_div"v-if="permissions.indexOf('sys_home_disk') > -1" >
      <el-card>
        <diskCheckIndex v-if="permissions.indexOf('sys_home_disk') > -1" :isFirstPage="true"></diskCheckIndex>
      </el-card>
    </div>
  </div>
</template>

<script>
import diskCheckIndex from "../diskCheck/diskCheckIndex"
import LoginSrv from "@/frames/dashboard/views/api/login.service.js";
import Chart from './components/CPU';
import Log from '../sysLog/sysLogIndex.vue';
import safePolicy from '../sysSafePolicy/sysSafePolicyIndex.vue';
import sysHomeApi from "./api/sysHome.service";

export default {
  name: "sysNacHome",
  components: {
    diskCheckIndex,
    Chart,
    Log,
    safePolicy
  },
  data() {
    return {
      // 角色编码
      roleCodes: [],
      // 权限标识
      permissions: null,
      CPUOptions: {
        title: {
          text: 'CPU使用率',
          x: 'center',
        },
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: 'CPU',
            type: 'gauge',
            detail: {formatter: '{value}%'},
            data: [{
              value: 0, name: '使用率'
            }]
          }
        ]
      },
      RAMOptions: {
        title: {
          text: 'RAM使用率',
          x: 'center',
        },
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: 'RAM',
            type: 'gauge',
            detail: {formatter: '{value}%'},
            data: [{
              value: 0, name: '使用率'
            }]
          }
        ]
      }
    };
  },
  async created() {
    this.init();
    this.getValue()
  },
  mounted() {
    const timerCPU = setInterval(() => {
      this.getValue('cpu')
    }, 10000)
    const timerRAM = setInterval(() => {
      this.getValue('ram')
    }, 20000)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timerCPU)
      clearInterval(timerRAM)
    })
  },
  methods: {
    // 初始化数据
    async init() {
      // LoginSrv.getInfo().then(res => {
      //   if (res.code !== 10200) this.$message.error(res.msg);
      //   this.permissions = res.data.permissions;
      // })
      this.permissions = JSON.parse(window.sessionStorage.getItem('permissions'))
    },
    getValue(str) {

        if (str === 'cpu' && this.permissions.indexOf('sys_home_cpu') > -1) {
          this.getCPU()
        }
        if (str === 'ram' && this.permissions.indexOf('sys_home_mem')) {
          this.getRAM()
        }
    },

    /**
     * 获取CPU运行状态
     * @author wangwuhui
     * @date 2021-7-7 16:35:28
     */
    getCPU() {
      sysHomeApi.getCPU().then(cpu => {
        const {data} = cpu
        this.CPUOptions.series[0].data[0].value = data.us
      })
    },

    /**
     * 获取内存运行状态
     * @author wangwuhui
     * @date 2021-7-7 16:35:28
     */
    getRAM() {
      sysHomeApi.getRAM().then(ram => {
        const {data} = ram, {used, total} = data
        this.RAMOptions.series[0].data[0].value = ((used / total) * 100).toFixed(1)
      })
    },
  },
};
</script>

<style lang="less" scoped>
  .chart {
    display: inline-block;
    margin: 3% 0 -5% 11%;
  }

  ._div {
    margin-top: 15px;
  }
</style>
